<template>
  <div id="detail">
    <detail-nav class="detail-nav"></detail-nav>
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :is-pull-up-load="true"
    >
      <detail-swiper :top-images="topImages"/>
      <detail-goods-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <goods-info :detail-info="detailInfo"
                  @imageLoaded="refreshScrollHeight"
      />
      <detail-params :param-info="paramInfo"/>
    </scroll>

  </div>
</template>

<script>
import DetailNav from "@/views/detail/children/DetailNav";
import DetailSwiper from "@/views/detail/children/DetailSwiper";
import DetailGoodsInfo from "@/views/detail/children/DetailGoodsInfo";
import DetailShopInfo from "@/views/detail/children/DetailShopInfo";
import GoodsInfo from "@/views/detail/children/GoodsInfo";
import Scroll from "@/components/common/scroll/Scroll";
import DetailParams from "@/views/detail/children/DetailParams";

import {getDetail, Goods, Shop, GoodsParams} from "@/network/detail";
import {debounce} from "@/common/utils";

export default {
  name: "Detail",
  components: {
    'detail-nav': DetailNav,
    'detail-swiper': DetailSwiper,
    'detail-goods-info': DetailGoodsInfo,
    'detail-shop-info': DetailShopInfo,
    'scroll': Scroll,
    'goods-info': GoodsInfo,
    'detail-params': DetailParams,
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      refresh: null,
      paramInfo: {}
    }
  },
  created() {
    this.iid = this.$route.params.iid;
    getDetail(this.iid).then(res => {
      let result = res.result;
      let itemInfo = result.itemInfo;
      this.topImages = itemInfo.topImages;
      this.goods = new Goods(itemInfo, result.columns, result.shopInfo.services);
      this.shop = new Shop(result.shopInfo);
      this.detailInfo = result.detailInfo;
      console.log(result.itemParams.info, result.itemParams.rule)
      this.paramInfo = new GoodsParams(result.itemParams.info, result.itemParams.rule);
    });
  },
  mounted() {
    this.refresh = debounce(this.$refs.scroll.refresh, 500);
  },
  methods: {
    refreshScrollHeight() {
      this.refresh();
    }
  }
}
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}

.content {
  height: calc(100% - 44px);
}

.detail-nav {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>
